import * as React from "react";

import { Button, Input, Select } from "antd";

import "./index.less";

const { Option } = Select;
export interface ConditionProps {
  onSubmit: (date: any) => any;
}

export interface ConditionState {
  staCycle: string;
  name: string;
}

class Condition extends React.Component<ConditionProps, ConditionState> {
  public dataJson: any = {};
  state = {
    staCycle: "",
    name: "",
  };
  render() {
    return (
      <div className="bare_body" style={{ padding: 16, paddingTop: 0 }}>
        <span style={{ paddingLeft: 26 }}>名称：</span>
        <div className="changeType_btn d_inlineFlex">
          <Input
            className="input"
            placeholder="请输入损耗对象名称"
            value={this.state.name}
            onChange={(e) => {
              this.setState({ name: e.target.value });
            }}
          />
        </div>

        <span style={{ paddingLeft: 26 }}>统计周期：</span>
        <Select
          placeholder="请选择统计周期"
          style={{ width: 80 }}
          value={this.state.staCycle}
          onChange={(e: string) => {
            this.setState({ staCycle: e });
          }}
        >
          <Option value="2" key="2">
            日
          </Option>
          <Option value="3" key="3">
            月
          </Option>
          <Option value="4" key="4">
            年
          </Option>
        </Select>
        <Button
          type="primary"
          className="l_distance"
          onClick={() => {
            this.getCondition();
          }}
        >
          查询
        </Button>
      </div>
    );
  }

  getCondition() {
    let { name, staCycle } = this.state;
    let queryData = {
      name,
      staCycle,
    };
    this.props.onSubmit(queryData);
  }
}

export default Condition;
